<template>
	<view class="content-whole">
		<!-- 搜索内容 -->
		<view class="searchfor-module">
			<u-search placeholder="锄禾日当午" v-model="searchValue" :height="40" :showAction='false' :searchIconSize='27'
				bgColor='#F5F5F5'></u-search>
		</view>
		<!--主体内容 -->
		<view class="mainbody-content">
			<!-- 左侧选择栏 -->
			<view class="selection-bar">
				<scroll-view scroll-y class="navscroll">
					<view class="item" v-for="(item,index) in selectionList" @click="clickNav(index,item.id)"
						:class="index== navIndex ? 'active' : ''" :key="item.id">
						<!-- <view >|</view> -->
						<text class="horizontal-bar" :style="{
							'backgroundColor':index === navIndex ? 'red' : 'white'
						}"></text>{{item.text}}
						<!-- {{ index == navIndex}} -->
					</view>
				</scroll-view>
			</view>
			<!-- 右侧商品栏 -->

			<!-- <view class="product-column" > -->
					<!-- 商品 -->

			<view class="product-column " @click="details">
				<!-- 商品 -->

				<view class="shopping-model">
					<!-- 左侧图片 -->
					<view class="shopping-image">
						<image src="../../static/logo.png" class="image" mode=""></image>
					</view>
					<!-- 右侧内容 -->
					<view class="shopping-introduction">
						<!-- 文本介绍 -->
						<view class="product-introduction">Product Introduction</view>
						<!-- 价格 -->
						<view class="price">
							<!-- 原价 -->
							<view class="current-price">
								<text class="current-symbol">￥</text>
								<text class="current-number">0.1</text>
							</view>
							<!-- 现价 -->
							<view class="original-price">
								<text class="original-symbol">￥</text>
								<text class="original-number">0.1</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		<!-- </view> -->
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索框
				searchValue: '',
				// 左侧选择栏内容
				selectionList: [{
						id: 1,
						text: '女装'
					},
					{
						id: 2,
						text: '女装'
					},
					{
						id: 3,
						text: '女装'
					},
					{
						id: 4,
						text: '女装'
					},
					{
						id: 5,
						text: '女装'
					},
					{
						id: 6,
						text: '女装'
					},
					{
						id: 7,
						text: '女装'
					},
					{
						id: 7,
						text: '女装'
					},
					{
						id: 7,
						text: '女装'
					},
					{
						id: 7,
						text: '女装'
					},
					{
						id: 7,
						text: '女装'
					},
					{
						id: 7,
						text: '女装'
					},
					{
						id: 7,
						text: '女装'
					},
					{
						id: 7,
						text: '女装'
					},
					{
						id: 7,
						text: '女装'
					},
					{
						id: 7,
						text: '女装'
					},
				],
				// 判断左侧列表样式
				navIndex: 0
			}
		},
		methods: {
			// 点击左侧选择栏显示左侧商品
			clickNav(index) {
				this.navIndex = index
			},
			//跳转相拼详情页
			details(){
				uni.navigateTo({
					url:'/pages/productDetails/productDetails'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.content-whole {
		background-color: #F5F5F5;
		height: 100vh;
		width: 100%;

		.searchfor-module {
			padding: 20rpx;
			height: 85rpx;
			background-color: #FFFFFF;
		}

		.mainbody-content {
			display: flex;
			
			.selection-bar {
				width: 20%;

				.navscroll {
					background: #FFFFFF;
					height: 90vh;
					position: relative;
					z-index: 10;

					.item {
						display: flex;
						align-items: center;
						justify-content: center;
						.horizontal-bar {
							width: 6rpx;
							height: 35rpx;
							background-color: red;
							display: inline-block;
							position: relative;
							left: -31rpx;
							top: 4rpx;
							// float: left;
							
						}

						background-color: #FFFFFF;
						font-size: 28rpx;
						line-height: 100rpx;
						text-align: center;
						color: #000;

						&.active {
							color: red;
						}

					}
				}
			}

			.product-column {
				padding: 20rpx;
				.shopping-model {
					height: 300rpx;
					background-color: #FFFFFF;
					border-radius: 10rpx;
					margin-bottom: 15rpx;
					display: flex;
					justify-content: space-between;
					padding: 10px;

					.shopping-image {
						width: 200rpx;
						height: 300rpx;

						.image {
							width: 100%;
							height: 100%;
							border-radius: 26rpx;
						}
					}
				}

				.shopping-introduction {
					width: 300rpx;
					position: relative;
					.product-introduction {
						margin-left: 20rpx;
						font-size: 35rpx;
						overflow: hidden;
						/* 隐藏溢出的内容 */
						text-overflow: ellipsis;
						/* 使用省略号表示溢出的文本 */
						display: -webkit-box;
						/* 仅适用于Webkit浏览器 */
						-webkit-line-clamp: 2;
						/* 限制在3行内显示 */
						-webkit-box-orient: vertical;
						/* 仅适用于Webkit浏览器 */
						word-wrap: break-word;
						/* 允许单词在边界处断行 */
						line-clamp: 2;
						/* 标准属性，但目前只有Webkit浏览器支持 */
					}

					.price {
						display: flex;
						margin: 130rpx 0rpx 0rpx 20rpx; 
						.current-price {
							margin-right: 20rpx;

							.current-symbol {
								font-size: 40rpx;
								color: red;
							}

							.current-number {
								font-size: 45rpx;
								color: red;
							}
						}

						.original-price {
							margin-top: 14rpx;
							color: #999999;
							text-decoration: line-through;

							.original-symbol {
								font-size: 30rpx;
							}

							.original-number {
								font-size: 25rpx;
							}
						}
					}
				}

			}
		}
	}
</style>